<template>
  <el-card class="brand-card" shadow="hover">
    <div
      class="brand-image"
      :style="{ backgroundImage: `url(${brand.image})` }"
    ></div>
    <div class="brand-info">
      <h3 class="brand-title">{{ brand.name }}</h3>
      <p class="brand-description">{{ brand.description }}</p>
      <div class="brand-details">
        <strong>特色产品:</strong> {{ brand.featuredProducts }}
      </div>
      <div class="brand-details">
        <strong>品牌使命:</strong> {{ brand.mission }}
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  brand: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.brand-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.brand-image {
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 15px;
  background-color: #fff;
}
.brand-info {
  padding: 0 15px 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.brand-title {
  font-size: 18px;
  margin-bottom: 10px;
}
.brand-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
  flex-grow: 1;
}
.brand-details {
  font-size: 14px;
  margin-bottom: 5px;
}
</style> 